<template>
  <view class="container">
    <checkbox id="collapse" class="exp"></checkbox>
    <view class="content" @click="$emit('clickText')">
      <text class="content-text" decode>{{ content }}</text>
    </view>
    <label class="btn" for="collapse" v-if="showBtn"></label>
  </view>
</template>

<script lang="ts" setup>
  import { nextTick } from 'vue';
  import { ref, getCurrentInstance } from 'vue';

  defineProps({
    content: { type: String, default: '' },
    row: { type: Number, default: 3 },
    size: { type: Number, default: 30 },
    color: { type: String, default: '#454545' },
    btnColor: { type: String, default: '#6e76a0' },
  });
  const showBtn = ref<boolean>(false);
  const _this = getCurrentInstance();
  const query = uni.createSelectorQuery().in(_this);

  nextTick(() => {
    query
      .selectAll('.content, .content-text')
      .boundingClientRect((data: any) => {
        if (data[1].height - data[0].height > 5) {
          showBtn.value = true;
        }
      })
      .exec();
  });

  defineEmits(['clickText']);
</script>

<style lang="scss" scoped>
  $row: v-bind(row);
  $size: v-bind("size + 'rpx'");

  .content {
    color: v-bind(color);
    font-size: $size;
    letter-spacing: 1rpx;
    line-height: 1.5;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    text-overflow: -o-ellipsis-lastline;
    -webkit-line-clamp: $row;
    line-clamp: $row;
    -webkit-box-orient: vertical;
  }

  .btn {
    display: flex;
    font-size: $size;
    color: v-bind(btnColor);
    padding: 10rpx 15rpx 4rpx 0;
    background: white;
  }
  .btn::after {
    content: '全文';
  }
  .exp {
    display: none;
  }
  .exp[checked] + .content {
    display: inline;
  }
  .exp[checked] + .content + .btn::after {
    content: '收起';
  }
</style>
